<!--
 * @Author: huang liang miao 1127255342@qq.com
 * @Date: 2024-11-07 15:14:45
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2024-11-13 14:20:49
 * @FilePath: \dcy-webd:\webCode\dcyCode\sr_system_manager_ui\src\views\system\user\profile\components\ChangePhone.vue
 * @Description: 变更手机号
-->

<script setup lang="ts">
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
})
const emits = defineEmits(['close'])

const form = ref({
  phone: null,
  code: null,
})
const formRef = ref()

const timeStart = ref(false)
const verifyCodeTime = ref(60)


// 发送手机换绑验证码
// const { run: sendCode } = useRequest(sendMobileChangeVerifyCode, {
//   manual: true,
//   onSuccess: () => {
//     const timeStop = setInterval(() => {
//       timeStart.value = true
//       verifyCodeTime.value--
//       if (verifyCodeTime.value <= 0) {
//         timeStart.value = false
//         verifyCodeTime.value = 60// 当减到0时赋值为60
//         clearInterval(timeStop)// 清除定时器
//       }
//     }, 1000)
//   },
// })

function getVerifyCode() {
  if (formRef) {
    formRef.value.validateField('phone', async (error) => {
      if (error)
        return
      // sendCode({ phone: form.value.phone })
    })
  }
}

function submit(){
  formRef.value.validate((valid) => {
    if (valid) {
      emits('close')
    }
  })
}
</script>

<template>
  <el-dialog
    v-model="props.visible"
    title="变更手机号"
    width="600"
    :align-center="true"
    :close-on-click-modal="false"
    @close="emits('close')"
  >
    <div class="py-[30px] px-[24px]">
      <el-form
        ref="formRef"
        :model="form"
      >
        <el-form-item label="手机号" prop="phone" :rules="[{required: true, message: '请输入手机号', trigger: 'blur'},
         { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请输入正确的手机号', trigger: 'blur' }]">
          <el-input v-model.trim="form.phone" placeholder="请输入手机号" maxlength="11" />
        </el-form-item>
        <el-form-item label="验证码" prop="code" :hide-required-asterisk="true" :rules="{
            required: true,
            message: '请输入验证码',
            trigger: 'blur',
          }">
          <div class="item-code">
            <el-col :span="18">
              <el-input v-model.trim="form.code" placeholder="请输入验证码" :controls="false"/>
            </el-col>
            
            <template v-if="!timeStart">
              <el-button type="primary" plain :disabled="timeStart" @click="getVerifyCode">
                获取验证码
              </el-button>
            </template>
            <template v-else>
              <el-tag type="primary" size="large" class="!w-[102px] !text-[14px]">{{ verifyCodeTime }}</el-tag>
            </template>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="emits('close')">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.item-code{
  @apply: flex justify-between items-center w-full;
}
</style>